import Vue from 'vue'

function handleFullScreen(dialog, isFullScreen, marginTop, width) {
	if (!dialog) return false
	if (isFullScreen) {
		dialog.style.marginTop = '0'
		dialog.style.marginLeft = '0'
		dialog.style.position = 'absolute'
		dialog.style.top = '0px'
		dialog.style.bottom = '0px'
		dialog.style.left = '0px'
		dialog.style.width = '100%'
	} else {
		// dialog.style.marginTop = marginTop
		dialog.style.margin = '0 auto'
		dialog.style.width = width
		dialog.style.position = 'relative'
	}
}

Vue.directive('ny-fullScreen', {
	bind(el, binding, vnode) {
		let isFullScreen = false

		const dialog = el.querySelector('.el-dialog')
		const header = el.querySelector('.el-dialog__header')
		if (!header || !dialog || !vnode) return
		header.style.paddingRight = '43px'
		header.style.boxShadow = '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
		const {
			width,
			top
		} = vnode.componentInstance

		const fullScreenBtn = document.createElement('button')
		fullScreenBtn.type = 'button'
		fullScreenBtn.style =
			'padding:0;background: 0 0;border:0;outline:0;cursor:pointer;font-size:17px;top:14px;right:38px;position:absolute;color:white;'

		const fullScreenIcon = document.createElement('i')
		fullScreenIcon.className = 'el-icon el-icon-full-screen'
		fullScreenBtn.append(fullScreenIcon)

		fullScreenBtn.addEventListener('click', () => {
			isFullScreen = !isFullScreen
			handleFullScreen(dialog, isFullScreen, top, width)
			return false
		})

		header.append(fullScreenBtn)

		header.addEventListener('dblclick', () => {
			isFullScreen = !isFullScreen
			handleFullScreen(dialog, isFullScreen, top, width)
			return false
		})
	}
})
